<template>
  <div>
    <el-dialog
      :title="this.$t('LineManagementLang.Insurance')"
      :visible.sync="Visible"
      width="47%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="dialogBox">
        <div class="dialogBoxItem">
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.protection_type')}}:
            </div>
            <div class="contant">
              <el-select
                :disabled="typeName==='details'"
                ref="type"
                filterable
                @blur="handleBlur('type', $event)"
                @change="handleChang('type')"
                v-model="data.type"
                :placeholder="$t('common.select_plactholder')"
              >
                <el-option
                  v-for="item in options_protection"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Bubble_weight')}}:
            </div>
            <div class="contant">
              <el-input-number
                :disabled="typeName==='details'||data.type!=3"
                controls-position="right"
                size="small" 
                ref="bw_rate" 
                @blur="handleBlur('bw_rate', $event)" 
                @focus="handleFocus($event)" 
                :min="1" 
                :precision="0"
                v-model="data.bw_rate">
              </el-input-number>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Insurance_unit_price')}}:
            </div>
            <div class="contant">
              <el-input-number
                :disabled="typeName==='details'"
                controls-position="right"
                size="small" 
                ref="price" 
                @blur="handleBlur('price', $event)" 
                @focus="handleFocus($event)" 
                :min="0"  
                :precision="2"
                v-model="data.price">
              </el-input-number>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Compensation_cap')}}:
            </div>
            <div class="contant">
              <el-input-number
                :disabled="typeName==='details'"
                controls-position="right"
                size="small" 
                ref="compensation_max" 
                @blur="handleBlur('compensation_max', $event)" 
                @focus="handleFocus($event)" 
                :min="0" 
                :precision="0"
                v-model="data.compensation_max">
              </el-input-number>
            </div>
          </div>
        </div>
      </div>
      <div class="dialogBox">
        <div class="dialogBoxItem">
          <div style="width: 14%;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Is_insurance')}}:
            </div>
            <!-- <div style="background-color: #fff;border: 1px solid #E0E3E9;border-radius: 7px;" class="contant"> -->
            <div class="contant">
              <!-- <div>{{data.status==1?'是':'否'}}</div> -->
              <el-switch
                :disabled="typeName==='details'"
                v-model="data.status"
                @change="switchChange()"
                :active-value="0"
                :inactive-value="1"
                active-color="#26BD00"
                >
              </el-switch>
            </div>
          </div>
          <div style="width: 14%;" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.isMandatory')}}:
            </div>
            <div class="contant">
              <el-switch
                :disabled="data.status!==0||typeName==='details'"
                v-model="data.is_force"
                :active-value="1"
                :inactive-value="0"
                active-color="#26BD00"
                >
              </el-switch>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              {{$t('LineManagementLang.Insurance_premium_rate')}}:
            </div>
            <div class="contant">
              <el-button type="primary" size="small" @click="setInterval">配置</el-button>
              <!-- <el-input-number
                :disabled="data.status!==0||typeName==='details'"
                controls-position="right"
                size="small" 
                ref="premium_rate" 
                @blur="handleBlur('premium_rate', $event)" 
                @focus="handleFocus($event)" 
                :min="0" 
                :precision="0"
                v-model="data.premium_rate">
              </el-input-number> -->
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Minimum_Value')}}:
            </div>
            <div class="contant">
              <el-input-number
                :disabled="data.status!==0||typeName==='details'"
                controls-position="right"
                size="small" 
                ref="premium_min" 
                @blur="handleBlur('premium_min', $event)" 
                @focus="handleFocus($event)" 
                :min="0"  
                :precision="0"
                v-model="data.premium_min">
              </el-input-number>
            </div>
          </div>
          <div class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Maximum_Value')}}:
            </div>
            <div class="contant">
              <el-input-number
                :disabled="data.status!==0||typeName==='details'"
                controls-position="right"
                size="small" 
                ref="premium_max" 
                @blur="handleBlur('premium_max', $event)" 
                @focus="handleFocus($event)" 
                :min="0"  
                :precision="0"
                v-model="data.premium_max">
              </el-input-number>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div style="width:100%" class="dialogBoxItemRow">
            <div class="title">
              <div class="RequiredRowTip">*</div>
              {{$t('LineManagementLang.Insurance_text')}}:
            </div>
            <div class="contant">
              <el-input
                disabled
                ref="intro_current"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.intro_current"
              ></el-input>
              <i v-if="data.status==0" @click="setInsuranceText" style="width:40px;textAlign: center;fontSize: 20px;marginLeft: 5px;color: #62afff;cursor: pointer;" class="el-icon-setting"></i>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  type="primary" @click="Previous_step" size="small">{{$t('LineManagementLang.Previous_step')}}</el-button
        >
        <el-button @click="next_step" size="small"
          >{{$t('LineManagementLang.next_step')}}</el-button
        >
      </span>
      
    </el-dialog>
    <SetInsuranceText
      @success="success_InsuranceText"
      ref="setInsuranceText"
    ></SetInsuranceText>
    <Interval
      ref="interval"
    ></Interval>
  </div>
</template>

<script>
import SetInsuranceText from "./LineManagement_setInsuranceText";
import Interval from "./LineManagement_insurance_interval";
export default {
  components: {
    SetInsuranceText,
    Interval,
  },
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      id:'',
      data: {
        type:"",
        bw_rate:"",
        price:"",
        compensation_max:"",
        status:1,
        is_force:0,
        premium_rate: "",
        premium_min: "",
        premium_max: "",
        intro_current: "",
        intro: "",
        intro_en: "",
        intro_ru: "",
      },
      options_protection:[],
      typeName:'',//判断是否为详情页跳转过来
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data,name) {
      this.getOptions()
      this.typeName=name
      this.id=data.id
      this.Visible = true;
      this.getData()
    },
    //获取下拉单数据
    getOptions(){
      this.$get("lineSysItems").then((res) => {
        this.options_protection = res.data.premium_type;
      });
    },
    //获取单条
    getData() {
      this.$get("linePremium", { id: this.id }).then((res) => {
        if(res.success&&JSON.stringify(res.data)!=='[]'&&JSON.stringify(res.data)!=='{}'){
          this.data = res.data;
          this.data.intro_current=res.data.intro
        }
      });
    },
    setInterval(){
      this.$refs.interval.init(this.id)
    },
    setInsuranceText(){
      let obj={
        Insurance_text_zh:this.data.intro,
        Insurance_text_en:this.data.intro_en,
        Insurance_text_ru:this.data.intro_ru,
      }
      this.$refs.setInsuranceText.init(obj)
    },
    success_InsuranceText(obj){
      this.data.intro=obj.Insurance_text_zh
      this.data.intro_en=obj.Insurance_text_en
      this.data.intro_ru=obj.Insurance_text_ru
      let langObj=JSON.parse(localStorage.getItem('language'))
      if(langObj.lang=='zh'){
        this.data.intro_current=obj.Insurance_text_zh
      }else if(langObj.lang=='en'){
        this.data.intro_current=obj.Insurance_text_en
      }else if(langObj.lang=='ru'){
        this.data.intro_current=obj.Insurance_text_ru
      }
      this.$refs.intro_current.$el.childNodes[1].style.border='1px solid #E0E3E9'
    },
    determine(){
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if (!this.data.type&&this.data.type!==0) {
        this.$refs.type.$el.childNodes[1].childNodes[1].style.border =
          "1px solid red";
        type = false;
      }
      if(!this.data.bw_rate&&this.data.type==3){
        this.$refs.bw_rate.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.price&&this.data.price!==0){
        this.$refs.price.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.compensation_max&&this.data.compensation_max!==0){
        this.$refs.compensation_max.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        type=false
      }
      if(this.data.status===0){
        // if(!this.data.premium_rate){
        //   this.$refs.premium_rate.$el.childNodes[2].childNodes[1].style.border='1px solid red'
        //   type=false
        // }
        if(!this.data.premium_min&&this.data.premium_min!==0){
          this.$refs.premium_min.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.data.premium_max&&this.data.premium_max!==0){
          this.$refs.premium_max.$el.childNodes[2].childNodes[1].style.border='1px solid red'
          type=false
        }
        if(!this.data.intro_current){
          this.$refs.intro_current.$el.childNodes[1].style.border='1px solid red'
          type=false
        }
      }
      return type
    },
    // 提交
    next_step() {
      if(this.typeName==='details'){
        this.$emit("next_step",this.typeName);
        this.cancel()
        return
      }
      //是否有空值必选项标识
      let type = this.determine()
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000);
        let params = new FormData();
        params.append("id", this.id);
        params.append("type", this.data.type);
        params.append("bw_rate", this.data.bw_rate);
        params.append("price", this.data.price);
        params.append("compensation_max", this.data.compensation_max);
        params.append("status", this.data.status);
        if(this.data.status===0){
          params.append("is_force", this.data.is_force);
          // params.append("premium_rate", this.data.premium_rate);
          params.append("premium_min", this.data.premium_min);
          params.append("premium_max", this.data.premium_max);
          params.append("intro", this.data.intro);
          params.append("intro_en", this.data.intro_en);
          params.append("intro_ru", this.data.intro_ru);
        }
        this.$postForm("saveLinePremium", params).then((res) => {
          this.confirmTrue = true;
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("next_step");
            this.cancel()
          }
        });
      }
    },
    Previous_step(){
      this.$emit('Previous_step',this.typeName)
      this.cancel()
    },
    //取消
    cancel() {
      this.data = {
        type:"",
        bw_rate:"",
        price:"",
        compensation_max:"",
        status:1,
        is_force:0,
        premium_rate: "",
        premium_min: "",
        premium_max: "",
        intro_current: "",
        intro: "",
        intro_en: "",
        intro_ru: "",
      };
      this.Visible = false;
      
      let dom = document.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
          event.target.style.border = "1px solid red";
        }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
    //下拉框有值后边框变色
    handleChang(data) {
      if(data=='type'){
        this.data.bw_rate=1
        this.$refs.bw_rate.$el.childNodes[2].childNodes[1].style.border='1px solid #E0E3E9'
      }
      if (this.data[data].length==0) {
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border = "1px solid red";
      }else{
        this.$refs[data].$el.childNodes[1].childNodes[1].style.border ="1px solid #E0E3E9 ";
      }
    },
    switchChange(){
      this.data.is_force=0
      this.data.premium_rate=""
      this.data.premium_min=""
      this.data.premium_max=""
      this.data.intro=""
      this.data.intro_en=""
      this.data.intro_ru=""
    },
  },
};
</script>

<style scoped lang="less" >
  .dialogBox .dialogBoxItem .dialogBoxItemRow{
    width: 23%;
  }
  /deep/ .el-dialog__wrapper{
    .el-dialog{
      min-width: 500px;
    }
  }
</style>